<template>
  <view class="page-container">
    <!-- 顶部装饰 -->
    <view class="header-bg"></view>
    
    <!-- 卡片容器 -->
    <view class="card">
      <!-- 标题 -->
     <view class="title">
        <text>rating</text>
        <!-- <text class="subtitle">请分享您的体验感受</text> -->
      </view>
      
      <!-- 评分部分 -->
      <view class="rating-section">
 <!--      <view class="section-title">
          <uni-icons type="star-filled" size="18" color="#FFD700"></uni-icons>
          <text>rating</text>
        </view> -->
		<uni-rate v-model="currentRating" @change="onChange"/>
<!--        <uni-rate 
          :value="currentRating" 
          @change="setRating" 
          size="32" 
          color="#bbb" 
          active-color="#FFD700" 
          margin="12"
        /> -->
        <text class="rating-hint">{{ ratingText }}</text>
      </view>
      
      <!-- 评价内容 -->
      <view class="review-section">
        <view class="section-title">
          <uni-icons type="edit" size="18" color="#4A9AFF"></uni-icons>
          <text>Evaluation Content</text>
        </view>
        <textarea 
          class="textarea"
          v-model="reviewContent"
          placeholder="Please write down your specific feelings or suggestions .."
          placeholder-style="color: #C0C0C0;"
          maxlength="500"
          :cursor-spacing="20"
        />
        <text class="word-count">{{ reviewContent.length }}/500</text>
      </view>
      
      <!-- 提交按钮 -->
      <button 
        class="submit-btn" 
        :class="{ active: canSubmit }" 
        :disabled="!canSubmit"
        @tap="submitRating"
      >
        {{ isSubmitting ? 'Submitting...' : 'Submit evaluation' }}
      </button>
    </view>
    
    <!-- 底部装饰 -->
    <view class="footer">
      <text>Your evaluation is very important to us!</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentRating: 0,
      reviewContent: '',
      isSubmitting: false,
      ratingTexts: [
        'Please rate',
        'Very dissatisfied',
        'Dissatisfied',
        'General',
        'Satisfied',
        'Very satisfied'
      ]
    }
  },
  computed: {
    ratingText() {
      return this.ratingTexts[this.currentRating]
    },
    canSubmit() {
      return this.currentRating > 0 && this.reviewContent.length > 0 && (!this.isSubmitting)
    }
  },
  methods: {
    setRating(e) {
      this.currentRating = e.value
    },
    submitRating() {
      if (!this.canSubmit) return
      
      this.isSubmitting = true
      
      // 模拟提交请求
      setTimeout(() => {
        uni.showToast({
          title: '提交成功',
          icon: 'success',
          mask: true
        })
        
        // 重置表单
        this.isSubmitting = false
        this.currentRating = 0
        this.reviewContent = ''
      }, 1500)
    }
  }
}
</script>

<style lang="scss">
/* 注意：如果使用HBuilderX创建项目，需在manifest中启用scss支持 */

page {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 30px;
}

.page-container {
  position: relative;
}

page {
	height: 100%;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220rpx;
  // background: linear-gradient(to right, #6d8cff, #4a9aff);
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
}

.card {
  position: relative;
  margin: 160rpx 30rpx 40rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);
  padding: 50rpx 40rpx;
  
  .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50rpx;
    
    text {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
      
      &.subtitle {
        font-size: 28rpx;
        font-weight: normal;
        color: #999;
        margin-top: 12rpx;
      }
    }
  }
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  color: #666;
  margin-bottom: 30rpx;
  
  text {
    margin-left: 8rpx;
  }
}

.rating-section {
  margin-bottom: 60rpx;
  
  .rating-hint {
    display: block;
    text-align: center;
    margin-top: 25rpx;
    color: #FF8C00;
    font-size: 28rpx;
  }
}

.review-section {
  position: relative;
  margin-bottom: 70rpx;
  
  .textarea {
    width: 100%;
    height: 300rpx;
    background-color: #f8f9ff;
    border-radius: 16rpx;
    padding: 24rpx;
    font-size: 30rpx;
    color: #333;
    box-sizing: border-box;
    border: 1rpx solid #e6e9ff;
  }
  
  .word-count {
    position: absolute;
    right: 20rpx;
    bottom: 15rpx;
    color: #999;
    font-size: 24rpx;
  }
}

.submit-btn {
  background: #c0c4cc;
  color: #fff;
  // border-radius: 0rpx;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 36rpx;
  transition: all 0.3s;
  box-shadow: none;
  
  &.active {
    background: linear-gradient(to right, #6d8cff, #4a9aff);
    box-shadow: 0 8rpx 25rpx rgba(106, 140, 255, 0.3);
  }
}

.footer {
  text-align: center;
  font-size: 26rpx;
  color: #999;
  margin-top: 30rpx;
}
</style>